<script setup>
import { onMounted } from "vue";
import { myCars } from "@/constants/mock.js";
import NavBar from "@/components/NavBar/index.vue";
import TabBar from "@/components/TabBar/index.vue";
import ServiceCard from "@/components/ServiceCard/index.vue";


function loggedIn() {
  return true;
}

onMounted(() => {
  if (!loggedIn()) {
    uni.redirectTo({
      url: "/pages/Login/index",
    });
  }
});


</script>

<template>
  <div class="container">
    <NavBar style="padding: 20px 0 0 20px;"></NavBar>
    <div class="service-content">
      <div v-for="car in myCars" :key="car.number">
        <ServiceCard :carInfo="car"></ServiceCard>
      </div>
    </div>
    <!-- <TabBar :tabIndex="1"></TabBar> -->
  </div>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
  overflow-y: hidden;
}

.service-content {
  display: flex;
  padding: 20px;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
  margin-bottom: 20px;
  overflow: scroll;
}
</style>
